<script setup>
import { onMounted, ref} from 'vue'
import { getOrderByIdAPI } from '@/apis/order'
import LayoutHeader from '../Layout/components/LayoutHeader.vue'
const orderList = ref([])
const userId = ref(5)
onMounted(async () => {
  const res =  await getOrderByIdAPI(userId.value)
  orderList.value = res.data.data
})

</script>
<template>
  <div class="common-layout">
    <div id="main">
      <div id="header"><LayoutHeader>
      </LayoutHeader>
    </div>
    <a href="http://127.0.0.1:5500/%E9%AB%98%E5%BE%B7%E5%9C%B0%E5%9B%BE/gao_de_map.html">返回首页</a>
      <div id="contain">
        
        <h3>您的订单列表：</h3>
        <el-table :data="orderList" :border="parentBorder" style="width: 100%">
          <el-table-column label="订单ID" prop="orderId" />
          <el-table-column label="房间ID" prop="roomId" />
          <el-table-column label="订单评分" prop="star" />
          <el-table-column label="订单评价" prop="orderComments" />
          <el-table-column label="订单状态" prop="orderStatus" />
          <el-table-column label="租用时间" prop="orderTime" />
          <el-table-column label="开始时间" prop="startTime" />
          <el-table-column label="结束时间" prop="endTime" /> 
        </el-table>
      </div>
    </div>
  </div>
</template>
<style scoped>
#header {
  height: 100px;
  border: 0 solid #ffff;
  border-bottom-width: 1px;
  border-image: linear-gradient(to right, #ffff, #f4f6f8);
  border-image-slice: 1;
  background-color: #ffff;
}
#main {
  background-color: #f4f6f8;
  margin: auto;
  width: 70%;
  height: 100%;
  border-radius: 5px;
}
.common-layout {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffff;
}
#contain {
  padding-top: 3%;
  width: 80%;
  margin: auto;
}
span {
  font-size: 30px;
}

#start {
  color: green;
}

#end {
  color: red;
}

#time {
  color: rgb(200, 205, 50);
}

.order {
  margin: 30px 30px 0px 30px;
}
a { 
  margin-left: 95%;
}
</style>
